<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-form-item label="病患姓名">
          <el-input
            v-model="search.name"
            placeholder="请输入病患姓名"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="6" :offset="2">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
        >
          <el-table-column
            prop="id"
            label="ID"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="病患姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="way"
            label="随访方式"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="随访时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="随访内容"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  info(scope.row);
                  dialogVisible = true;
                "
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="新增复诊随访记录" width="50%">
      <el-form :model="Info" label-width="100px">
        <el-row class="SearchRow" style="position: relative">
          <el-col :span="12">
            <el-form-item label="病患姓名">
              <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="form.pathogenesis" />
            </el-form-item>

            <el-form-item label="年龄">
              <el-input v-model="form.result" />
            </el-form-item>
            <el-form-item label="随访方式">
              <el-input v-model="form.content" />
            </el-form-item>
            <el-form-item label="随访时间">
              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="请选择时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="随访内容">
              <el-input v-model="form.content" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import { http } from "@/utils/http";
import { PaginFindRevisitRecords } from "@/api/api";

defineOptions({
  name: "Fuzhensuifang"
});

const Data = ref([
  {
    id: 1,
    name: "张三",
    sex: "男",
    age: "18",
    way: "电话随访",
    time: "2024-06-23",
    content: "询问病情并告知复诊时间"
  },
  {
    id: 2,
    name: "李四",
    sex: "男",
    age: "18",
    way: "上门随访",
    time: "2024-06-23",
    content: "询问病情并告知复诊时间"
  }
]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数

const search = ref({
  token: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  body: {
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  }
});

const form = ref({
  title: ""
});
const dialogVisible = ref(false);

const onSubmit = () => {};
const add = () => {
  dialogVisible.value = true;
};
// 分页查询
const getList = (data?: object) => {
  PaginFindRevisitRecords(search.value).then((res:any) => {
    Data.value = res.data.records;
  });
};

// 查看详情
const info = row => {};
// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  // GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>
